<template>
	<view class="login">
		<image class="login_top_bg" src="@/static/images/login/login_top_bg.png" width="100%" height="100%" />
		<image class="login_bottom_bg" src="@/static/images/login/login_bottom_bg.png" alt="" srcset="" />
		<view class="login_top">
			<image class="login_logo" src="@/static/images/login/login_logo.png" alt="" srcset="" />
			<text>{{title}}</text>
		</view>
		<uv-form labelPosition="left" :model="form" :rules="rules" class="login_form" ref="loginForm">
			<view class="form_title">
				登录
			</view>
			<uv-form-item class="login_formitem" prop="name">
				<uv-input class="form_input" shape="circle" border='none' v-model="form.name" placeholder="请输入用户名"
					placeholderStyle="
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 30rpx;
				padding-left:67rpx;">

				</uv-input>
				<image src="@/static/images/login//icon_user.png" class="input_icon" alt="" srcset="" />
			</uv-form-item>
			<uv-form-item class="login_formitem" prop="password">
				<uv-input v-show="passwordIcon" type="password" class="form_input" v-model="form.password" border="none"
					placeholder="请输入密码" placeholderStyle="
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 30rpx;
				padding-left:67rpx;
				padding-right: 63rpx;
				height:30rpx;">
				</uv-input>
				<uv-input v-show="!passwordIcon" type="text" class="form_input" v-model="form.password" border="none"
					placeholder="请输入密码" placeholderStyle="
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
				padding-left:67rpx;
				padding-right: 63rpx;
				height:30rpx;">
				</uv-input>
				<image src="@/static/images/login/icon_password.png" style="width: 26rpx;" class="input_icon" alt=""
					srcset="" />
				<image @click="changeIcon" src="@/static/images/login/icon_eye.png" v-if="!passwordIcon"
					class="icon_eye" alt="" />
				<image @click="changeIcon" src="@/static/images/login/icon_hidden.png" v-if="passwordIcon"
					class="icon_eye" alt="" />
			</uv-form-item>
			<button class="login_btn" @click="capctchaCheck">登录</button>
		</uv-form>
		<Verify @success="submit" :mode="'pop'" :captchaType="'blockPuzzle'"
			:imgSize="{ width: imgW +'px', height: imgH +'px' }" ref="verify"></Verify>
	</view>
</template>

<script setup>
	import { computed, inject, ref } from 'vue';
	import Verify from "@/components/Verifition/Verify";
	import { onReady } from '@dcloudio/uni-app'
	import { userStore } from '@/stores'
	
	// 全局变量
	const global = inject('global');
	// 使用 store
	const user = userStore()
	const { login } = user
	// ref Dom
	const loginForm = ref(null);
	const verify = ref(null);
	// 页面变量
	const form = ref({name: null, password: null});
	const rules = ref({
		'name': {
			type: 'string',
			required: true,
			message: '用户名不能为空',
			trigger: ['blur', 'change']
		},
		'password': {
			type: 'string',
			required: true,
			message: '登录密码不能为空',
			trigger: ['blur', 'change']
		},
	})
	const title = ref(global.appName);
	const passwordIcon = ref(true)
	// computed 计算
	let imgW = computed(() => () => {
		return systemInfo.screenWidth * .8
	})
	let imgH = computed(() => () => {
		return systemInfo.screenWidth * .25 * .8
	})
	// 页面 onReady 生命周期
	onReady(() => {
		loginForm.value.setRules(rules.value)
	})
	// 方法
	const submit = (params) => {
		const {name, password} = form.value
		const data = {
			username: name,
			password: password,
			code: params.captchaVerification
		}
		login(data).then(res => {
			if (password.length < 7 && /\d/.test(password)) {
				const timeOut = setTimeout(() => {
					uni.showToast({
						title: '密码强较弱，请及时修改密码',
						icon: "none"
					})
					clearTimeout(timeOut)
				}, 1500)
			}
		}).catch(err => {
			uni.showToast({
				title: err.msg,
				icon: 'none'
			})
		})
	}
	const changeIcon = () =>{
		passwordIcon.value = !passwordIcon.value
	}
	const capctchaCheck = () => {
		loginForm.value.validate().then(res => {
			verify.value.show();
		})
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: relative;

		.login_top_bg {
			width: 750rpx;
			height: 503rpx;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0.8;
			z-index: 0;
		}

		.login_bottom_bg {
			width: 557rpx;
			height: 460rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		.login_top {
			position: relative;
			z-index: 2;
			padding-top: 150rpx;
			padding-left: 70rpx;

			.login_logo {
				width: 60rpx;
				height: 56.25rpx;
				vertical-align: bottom;
			}

			text {
				font-size: 50rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFEFE;
				line-height: 25rpx;
				padding-left: 15rpx;
			}
		}

		.login_form {
			width: 638rpx;
			height: 706rpx;
			margin: 122rpx auto 0;
			background: #FFFFFF;
			box-shadow: 5rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 14rpx;
			position: relative;
			z-index: 3;

			.form_title {
				padding: 67rpx 0 60rpx 67rpx;
				font-size: 50rpx;
				font-family: SourceHanSansSC;
				font-weight: bold;
				color: #000000;
			}

			.login_formitem {
				padding: 0 67rpx 30rpx;
				position: relative;
				height: 120rpx;

				.form_input {
					height: 88rpx;
					background: #F5F5F5;
					border-radius: 44rpx;

					::v-deep .uni-input-input {
						padding-left: 67rpx;
					}
				}

				::v-deep .uv-form-item__body__right__message {
					margin-top: 6rpx;
				}

				::v-deep .uv-form-item__body {
					padding: 0;
				}

				::v-deep .uv-line {
					border: none !important;
				}

				.input_icon {
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					top: clac(67rpx + 29rpx);
					left: calc(67rpx + 29rpx);
				}

				.icon_eye {
					width: 30rpx;
					height: 20rpx;
					padding: 30rpx 30rpx;
					position: absolute;
					top: clac(67rpx + 29rpx);
					right: calc(67rpx + 31.25rpx);
					;
				}
			}

			.login_btn {
				width: 503rpx;
				height: 89rpx;
				line-height: 89rpx;
				background: rgba($color: #8CA4F8, $alpha: 0.9);
				border-radius: 44rpx;
				color: #FFFFFF;

				::v-deep .uv-button__text {
					font-size: 32rpx !important;
				}
			}

		}
	}
</style>